<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="玩家ID" prop="playerId">
                    <el-input class="filter-item" type="textarea" autosize v-model="search.playerId" placeholder="多ID使用回车换行"/>
                </el-form-item>
                <el-form-item label="支付宝" prop="zfb">
                    <el-input class="filter-item" type="textarea" autosize v-model="search.zfb" placeholder="多支付宝使用回车换行"/>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            :row-class-name="tableRowClassName"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
            :max-height="maxHeight">
            <vxe-table-column type="checkbox" width="40" fixed="left"/>
            <vxe-table-column title="玩家ID" field="playerId" min-width="100"/>
            <vxe-table-column title="昵称" field="nickName" min-width="120"/>
            <vxe-table-column title="VIP" field="vip" width="40"/>
            <vxe-table-column title="奶酪数量" field="bullet" formatter="formatHuman" min-width="120"/>
            <vxe-table-column title="棒棒糖" field="hbticket" formatter="formatHuman" min-width="120"/>
            <!--            <vxe-table-column title="燃料" field="fuel" min-width="120"/>-->
<!--            <vxe-table-column title="碎片" field="scrap" formatter="formatHuman" min-width="120"/>-->
<!--            <vxe-table-column title="超级火力" field="prop_1029" formatter="formatHuman" min-width="120"/>-->
            <vxe-table-column title="累计充值" field="account_profit.sum_pay" width="100" formatter="formatHumanRmb"/>
            <vxe-table-column title="累计消费" field="sum_expend" width="100" formatter="formatHumanRmb"/>
<!--            <vxe-table-column title="累计权益" field="account_profit.sum_withdraw" width="100" formatter="formatHumanRmb"/>-->
            <vxe-table-column title="累计积分" field="account_profit.sum_third_exchange" width="100" :formatter="['formatW', 1]"/>
            <vxe-table-column title="总在线时长(秒)" field="onlineTime" width="120"/>
            <vxe-table-column title="支付宝账号" field="zfb" min-width="120"/>
            <vxe-table-column title="真实姓名" field="real_name" min-width="120"/>
            <vxe-table-column title="创建时间" field="create_at" width="140"/>
            <vxe-table-column title="更新时间" field="update_time" width="140"/>
        </vxe-table>

        <div class="mt-10 pull-left">
            <clipboard-column :data="selected" title="复制玩家属性"></clipboard-column>
        </div>

        <el-pagination
            class="pull-right"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

    </div>
</template>

<script>
import SelectScene from '~/components/Select/scene';
import ClipboardColumn from "~/components/Dialog/clipboard-column";

export default {
    components: {
        SelectScene,
        ClipboardColumn,
    },
    data() {
        return {
            search: {
                playerId: '',
                zfb: '',
            },
            loading: false,
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            downloadLoading: false,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,
            selected: [],
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 210;
        },
    },
    watch: {

    },
    methods: {
        selectAllEvent ({ checked, records }) {
            this.selected = records;
            // console.log(checked ? '所有勾选事件' : '所有取消事件', records)
        },
        selectChangeEvent ({ checked, records }) {
            this.selected = records;
            // console.log(checked ? '勾选事件' : '取消事件', records)
        },
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            // 简单去重
            // if (!filter.playerId && !filter.zfb) {
            //     this.$message.warning('玩家ID必填');
            //     return ;
            // }
            if (filter.playerId) {
                filter.playerId = Array.from(new Set(
                    filter.playerId.split('\n').filter(v=>v).filter(v => !isNaN(Number(v)))
                ));
            }
            if (filter.zfb) {
                filter.zfb = Array.from(new Set(
                    filter.zfb.split('\n').filter(v=>v)
                ));
            }
            this.loading = true;
            this.$store.dispatch('user/Players', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data.data)
                // this.tableData = Object.freeze(data.data);
                this.totalDataNumber = data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
        tableRowClassName({row, rowIndex}) {
            // if (row.status === 1) return 'color-success';
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '玩家数据',
                type: 'xlsx'
            })
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

